window.onload = function () {
  // 获取标签
  let video = document.querySelector('video')     // 获取video标签
  let start = document.querySelector('.start')    //获取开始播放按钮
  let jindu = document.querySelector('.jinduyanse')   //获取进度条
  let timer;           // 设置一个timer接收时钟
  let jindutiao = 0   // 设置进度条初始为0
  let flag = true      // 这里设置flag为true 备用
  // 给开始播放绑定点击事件
  start.addEventListener('click', function () {
    video.play()       // 点击按钮,视频开始播放

    // 设置时钟开始获取视频当前时间
    timer = setInterval(function () {
      // 并实时显示当前进度
      jindutiao = video.currentTime / video.duration * 100 + '%'
      jindu.style.width = jindutiao   //将运算后的百分比赋值给标签的width属性
    }, 100)
    // 当视频结束时
    video.addEventListener('ended', function () {
      clearInterval(timer)       // 清除定时器
      flag = !flag                // 取反flag,使flag等于true
      start.innerHTML = '开始播放'    // 将按钮文本改为开始播放
    })
    // 点击按钮时，如果flag = true
    if (flag) {
      video.play()        // 则视频开始播放
      flag = !flag        // 取反flag,使flag = false
      start.innerHTML = '暂停播放'        // 将按钮文本改为暂停播放
    } else {              // 如果flag 不等于 true ，及flag = false 时
      video.pause()       // 点击按钮将会暂停播放
      flag = !flag        // 这时取反flag，使false 变回true
      start.innerHTML = '开始播放'        //将按钮文本改为开始播放
    }
  })

}
